// 获取DOM元素
const addTaskForm = document.getElementById('addTaskForm');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

// 从本地存储加载任务，如果没有则初始化为空数组
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

// 渲染任务列表的函数
function renderTasks() {
    taskList.innerHTML = ''; // 清空当前列表
    tasks.forEach((task, index) => {
        const li = document.createElement('li');
        li.textContent = task.text;
        
        // 添加删除按钮
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除';
        deleteButton.addEventListener('click', () => {
            deleteTask(index); // 调用删除函数
        });
        
        li.appendChild(deleteButton);
        taskList.appendChild(li);
    });
}

// 添加任务的函数
function addTask(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    const taskText = taskInput.value.trim();
    if (taskText === '') {
        alert('请输入任务描述');
        return;
    }
    
    tasks.push({ text: taskText }); // 添加新任务到数组
    localStorage.setItem('tasks', JSON.stringify(tasks)); // 保存到本地存储
    taskInput.value = ''; // 清空输入框
    renderTasks(); // 重新渲染列表
}

// 删除任务的函数
function deleteTask(index) {
    tasks.splice(index, 1); // 从数组中移除任务
    localStorage.setItem('tasks', JSON.stringify(tasks)); // 更新本地存储
    renderTasks(); // 重新渲染列表
}

// 事件监听：表单提交时添加任务
addTaskForm.addEventListener('submit', addTask);

// 页面加载时渲染任务
renderTasks();